<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10+52}px`}">
		<view class="myPages__mbox" :style="{height: `${search.top+search.height+10}px`}"></view>
		<myHeard :search="search" :isTrue="false" :title="title" @goPath="goBack"></myHeard>

		<view class="tabs" :style="{top:`${search.top+search.height+10}px`}">
			<block v-for="(item,index) in ['售后申请','处理中','申请记录']" :key="index">
				<view class="tabsItems" @click.stop="changeTabs(index)">
					<view :class="tabIndex==index?'tab active':'tab'">{{item}}</view>
					<view :class="tabIndex==index?'tab_hen tab_hen--active':'tab_hen'"></view>
				</view>
			</block>
		</view>
		<view class="myPages__swperMain" v-if="aftersaleArr.length==0">
			<image class="kong" src="/static/images/oderkongIcon.png"></image>
		</view>
		<view class="myPages__swperMain" v-else>
			<view class="myPages__swperMainItems"
				@click.stop="goPath(`/package/afterSaleDetails/index?serviceNo=${item.orderService.serviceNo}`)"
				v-for="(item,index) in aftersaleArr" :key="index">
				<view class="myPages__swperMainItemsHeard">
					<!-- 售后状态--退款成功-->
					<view class="myPages__swperMainItemsHeardLeft"
						v-if="item.orderService.orderRefund.refundStatus==40">
						<image src="/static/images/meny_action.png"></image>
						<span>退款成功</span>
					</view>
					<!-- 售后状态--处理中(saleIcon2)-->
					<view class="myPages__swperMainItemsHeardLeft myPages__swperMainItemsHeardLeft--geis"
						v-else-if="item.orderService.checkStatus==10&&item.orderService.serviceStatus==20">
						<image src="/static/images/saleIcon2.png"></image>
						<span>处理中</span>
					</view>
					<!-- 售后状态--失败(meny)-->
					<view class="myPages__swperMainItemsHeardLeft"
						v-else-if="item.orderService.checkStatus==30&&item.orderService.serviceStatus==30">
						<image src="/static/images/meny_action.png"></image>
						<span>退款失败</span>
					</view>
					<!-- 售后状态--退款中(meny)-->
					<view class="myPages__swperMainItemsHeardLeft myPages__swperMainItemsHeardLeft--geis"
						v-else-if="item.orderService.orderRefund.refundStatus==20||item.orderService.orderRefund.refundStatus==10">
						<image src="/static/images/meny.png"></image>
						<span>退款中</span>
					</view>
					<!-- 售后状态--已撤销-->
					<view class="myPages__swperMainItemsHeardLeft" v-else-if="item.orderService.serviceStatus==10">
						<image src="/static/images/meny_action.png"></image>
						<span>已撤销</span>
					</view>

					<view class="myPages__swperMainItemsHeardRight">售后编号：{{item.orderService.serviceNo}}</view>
				</view>
				<view class="myPages__swperMainItemsBodys">
					<view class="myPages__swperMainItemsBodysItem" v-for="(twoItem,twoIndex) in item.orderProductList"
						:key="twoIndex">
						<view class="myPages__swperMainItemsBodysItemLeftBox">
							<image
								:class="twoItem.productType==20?'myPages__swperMainItemsBodysItemLeftBoxImg':'myPages__swperMainItemsBodysItemLeftBoxImgs'"
								:src="twoItem.productImg"></image>
						</view>
						<view class="myPages__swperMainItemsBodysItemRightBox">
							<p>{{twoItem.productName}}</p>
							<p>{{twoItem.productSku}}</p>
						</view>
					</view>
				</view>
				<view class="myPages__swperMainItemsEnd">
					<view class="myPages__swperMainItemsEndLeftBox">
						<p>共{{item.orderService.totalNum}}件商品</p>
						<p>{{item.createTime | ff_createTime}}</p>
					</view>
					<!-- 售后状态--退款成功-->
					<view v-if="item.orderService.orderRefund.refundStatus==40"
						class="myPages__swperMainItemsEndRightBox">
						<span @click.stop="reomve(item.orderNo,index)">删除订单</span>
						<span
							@click.stop="goPath(`/package/afterSaleDetails/index?serviceNo=${item.orderService.serviceNo}`)">重新购买</span>
					</view>
					<!-- 售后状态--退款失败-->
					<view
						v-else-if="(item.orderService.checkStatus==30&&item.orderService.serviceStatus==30) || (item.orderService.serviceStatus==10)"
						class="myPages__swperMainItemsEndRightBox">
						<span @click.stop="reomve(item.orderNo,index)">删除订单</span>
						<span
							@click.stop="goPath(`/package/afterSaleDetails/index?serviceNo=${item.orderService.serviceNo}`)">重新购买</span>
					</view>
					<!-- 售后状态--退款中(meny)--处理中(saleIcon2)
						-->
					<view
						v-else-if="(item.orderService.orderRefund.refundStatus==10)||(item.orderService.orderRefund.refundStatus==20)"
						class="myPages__swperMainItemsEndRightBox">
						<span @click.stop="ff_salesShow(item.orderService.serviceNo)">撤销申请</span>
						<span
							@click.stop="goPath(`/package/afterSaleDetails/index?serviceNo=${item.orderService.serviceNo}`)">查看详情</span>
					</view>


				</view>
			</view>
		</view>
		<!-- 删除订单-->
		<u-overlay :show="show" @click="show = false">
			<view @click.stop="" class="warp">
				<view class="warpText">确认删除订单？</view>
				<view class="warpButtom">
					<span class="warpButtomQx" @click.stop="show = false">取消</span>
					<span class="warpButtomYes" @click.stop="ff_yes">确定</span>
				</view>
			</view>
		</u-overlay>
		<!-- 撤销售后-->
		<u-overlay :show="salesShow" @click="salesShow = false">
			<view @click.stop="" class="warp">
				<view class="warpText">确认撤销售后申请？</view>
				<view class="warpButtom">
					<span class="warpButtomQx" @click.stop="salesShow = false">取消</span>
					<span class="warpButtomYes" @click.stop="ff_salesyes">确定</span>
				</view>
			</view>
		</u-overlay>
		<!-- 撤销成功 -->
		<u-overlay :opacity="0.01" :show="isShowDui">
			<view @click.stop="" class="overlayBox">
				<image src="/static/images/duiIcon.png"></image>
				<span>{{mtTitle}}成功</span>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import myHeard from '@/components/myHeard/index.vue'
	export default {
		components: {
			myHeard
		},
		data() {
			return {
				title: '我的售后',
				mtTitle: '撤销',
				tabIndex: 0,
				aftersaleArr: [],
				salesShow: false,
				reomveOrderNo: '',
				reomveIndex: 0,
				pageNum: 1,
				pageSize: 5,
				show: false,
				serviceNo: '',
				// 导航标志：all【全部】handle【处理中】recover【记录】
				aftersaleType: ['all', 'handle', 'recover'],
				isShowDui: false
			}
		},
		onLoad(oprtion) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
		},
		onShow() {
			this.pageNum = 1;
			this.aftersaleArr = [];
			this.getOrderServiceWxList();
		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		filters: {
			ff_createTime(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()

				function formatNumber(n) {
					n = n.toString()
					return n[1] ? n : '0' + n
				}
				return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(
						formatNumber)
					.join(':')
			}
		},
		onReachBottom() {
			this.pageNum++;
			this.getOrderServiceWxList();
		},
		methods: {
			getOrderServiceWxList() {
				let nav = this.aftersaleType[this.tabIndex];

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderServiceWxList(nav, {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					if (res.code == 200) {
						console.log(res.data)
						this.aftersaleArr = [...this.aftersaleArr, ...res.data]
					}
				})
			},
			reomve(orderNo, index) {
				this.show = true;
				this.reomveOrderNo = orderNo;
				this.reomveIndex = index;
			},
			ff_salesyes() {
				this.mtTitle = '撤销'
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.serviceReasonWxCancel({
					serviceNo: this.serviceNo
				}).then(res => {
					if (res.code == 200) {
						this.salesShow = false;
						if (res.msg == '操作成功') {
							this.isShowDui = true;
							setTimeout(() => {
								this.isShowDui = false;
								this.pageNum = 1;
								this.aftersaleArr = [];
								this.getOrderServiceWxList();
							}, 1000)



						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
								mask: true
							});

						}





					}
				})

			},
			ff_yes() {
				this.mtTitle = '删除'
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderWxRemove({
					orderNo: this.reomveOrderNo
				}).then(res => {
					if (res.code == 200) {
						this.show = false;
						this.isShowDui = true;
						
						setTimeout(()=>{
							this.isShowDui = false;
							let nowOrderList = JSON.parse(JSON.stringify(this.aftersaleArr))
							nowOrderList.splice(this.reomveIndex, 1);
							this.aftersaleArr = JSON.parse(JSON.stringify(nowOrderList))
							
						},1000)
						
						// uni.showToast({
						// 	icon: 'none',
						// 	title: res.msg,
						// 	mask: true
						// });
					}

				})
			},
			ff_salesShow(serviceNo) {
				this.salesShow = true;
				this.serviceNo = serviceNo;

			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			changeTabs(index) {
				this.tabIndex = index;
				this.pageNum = 1;
				this.aftersaleArr = [];
				this.getOrderServiceWxList();
			},
			goBack() {
				uni.switchTab({
					url: '/pages/user/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		min-height: 100vh;
		background-color: #F7F8FC;
		box-sizing: border-box;

		.myPages__mbox {
			background-color: #FFFFFF;
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.myPages__swperMainItemsHeardRight {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: 400;
			line-height: 34rpx;
			color: #B0B1BB;
		}

		.overlayBox {
			width: 202rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);

			image {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
			}

			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
				margin-left: 8rpx;

			}
		}

		.warp {
			width: 70%;
			height: 210rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%);
		}

		.warpText {
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #2B2B33;
			width: 100%;
			padding: 40rpx 0;
		}

		.warpButtom {
			display: flex;

			span {
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #F0414D;
				border-top: 3rpx solid #F0F2F8;
				box-sizing: border-box;
			}

			span:nth-child(1) {
				border-right: 3rpx solid #F0F2F8;
				color: #B0B1BB;
			}
		}

		.myPages__swperMain {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.kong {
			width: 450rpx;
			height: 450rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.myPages__swperMainItems {
			width: 100%;
			box-sizing: border-box;
			padding: 32rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			margin-bottom: 32rpx;
		}

		.myPages__swperMainItemsHeard {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.myPages__swperMainItemsEndRightBox {
			span {
				width: 168rpx;
				font-size: 26rpx;
				font-family: 蘋方-簡;
				display: inline-block;
				height: 68rpx;
				line-height: 64rpx;
				border: 2rpx solid #f0414d;
				color: #f0414d;
				text-align: center;
				box-sizing: border-box;
				border-radius: 40rpx;
			}

			span:nth-child(2) {
				color: #FFFFFF;
				background-color: #f0414d;
				margin-left: 16rpx;
			}

		}

		.myPages__swperMainItemsEnd {
			height: 72rpx;
			display: flex;
			justify-content: space-between;
		}

		.myPages__swperMainItemsEndLeftBox {
			color: #B0B1BB;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: 400;
		}

		.myPages__swperMainItemsBodys {
			padding: 16rpx 0;
		}

		.myPages__swperMainItemsBodysItem {
			display: flex;
			padding: 8rpx 0;
		}


		.myPages__swperMainItemsBodysItemLeftBox {
			width: 152rpx;
			flex: 0 0 152rpx;
			height: 152rpx;
			border-radius: 40rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #f9f8fd;


			image {
				width: 152rpx;
				height: 152rpx;
			}
		}

		.myPages__swperMainItemsBodysItemLeftBoxImg {
			width: 92rpx !important;
			height: 92rpx !important;
		}

		.myPages__swperMainItemsBodysItemLeftBoxImgs {
			transform: scale(1.4);
		}

		.myPages__swperMainItemsBodysItemRightBox {
			flex: 1;
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			p {
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #2B2B33;
			}

			p:nth-child(2) {
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #7B7D8D;
			}
		}

		.myPages__swperMainItemsHeardLeft--fk {
			span {
				color: #F0414D !important;
			}

		}

		.myPages__swperMainItemsHeardLeft--geis {
			span {
				color: #000 !important;
			}
		}

		.myPages__swperMainItemsHeardLeft {
			display: flex;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			span {
				height: 40rpx;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: 500;
				line-height: 40rpx;
				color: #B0B1BB;
				margin-left: 6rpx;
			}
		}

		.tabs {
			position: fixed;
			left: 0;
			width: 100%;
			height: 102rpx;
			background-color: #fff;
			border-radius: 0px 0px 40rpx 40rpx;
			display: flex;
			padding: 0 32rpx;
			box-sizing: border-box;
			justify-content: space-between;
			z-index: 1;
		}

		.tabsItems {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.tab_hen {
			width: 32rpx;
			height: 6rpx;
			background: transparent;
			opacity: 1;
			border-radius: 4rpx;
			margin: 8rpx auto;
		}

		.tab_hen--active {
			background: #F0414D !important;
		}

		.tab {
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: 400;
			color: #7B7D8D;
			text-align: center;
		}

		.active {
			font-weight: 550 !important;
			color: #000 !important;
		}
	}
</style>
